#include("../../comm/ListHead.html")
<style>
    .layui-tab-title li{ padding-left:3px; padding-right:3px; }
</style>
<div class="layui-fluid layui-anim layui-anim-fadein">
    <button class="layui-btn layui-hide" id="uploadbtn">上传文件</button>
    <div class="layui-card">
        <div class="card-search SearchTable">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title" style="width: 400px;float:left">
                    <li class="layui-this">图片</li>
                    <li lay-event="TurnTempletList">图文</li>
                    <li lay-event="TurnTempletList">音频</li>
                    <li lay-event="TurnTempletList">视频</li>
                </ul>
            </div>
        </div>
        <div class="layui-card-body">
            <table class="layui-hide" id="table_1" lay-filter="table_1"></table>

            <script type="text/html" id="table_1_bar_title">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="UploadMediaImage">上传图片媒资</button>
                </div>
            </script>
        </div>
    </div>
</div>
<script language="JavaScript">
    layui.use(['table', 'form', 'myTable', 'myTool', 'upload'], function () {
        var $ = layui.$;
        table = layui.table, myTool = layui.myTool, myTable = layui.myTable;
        //
        layui.upload.render({
            elem: '#uploadbtn', url: '#(form.data.upload_url)', size: 30000, accept: 'file', exts: 'jpg|gif|jpeg|png|'
            , done: function (res) {
                if (res.code == 0) {
                    tableindex.reload();
                    layer.msg('上传成功');
                } else {
                    layer.msg('上传失败');
                }
            }
        });

        tableindex = layui.myTable.render({
            elem: '#table_1', skin: 'line'
            , url: 'WxMediaListDataApi'
            , where: {type: 'image'}
            , toolbar: '#table_1_bar_title'
            , title: '图片媒资清单列表'
            , cols: [[
                {type: 'checkbox', width: 36}
                , {title: '图', align: 'center', width: 70, image: {show: true, url: 'url', style: 'width:50px;height:30px'}}
                , {field: 'name', title: '名称', width: 200}
                , {field: 'media_id', title: 'MEDIA_ID'}
                , {field: 'update_time', title: '上传时间', align: 'left', width: 170}
            ]]
            , page: true, limit: 10
        });

        layui.util.event("lay-event", {
            TurnTempletList: function () {
                window.location.href = "WxTempletList";
            }
        });

        table.on('toolbar(table_1)', function (obj) {
            myTool.toolbar(this, obj, {
                UploadMediaImage: function () {
                    $("#uploadbtn").click();
                }
            });
        });
    });
</script>
</body>
</html>